<template>
	<view style="width: 100%;">
		<view class="screen-bar" :style="{'height':height + 'rpx',background:bgcolor}">
			<view class="screen-bar-item" @tap.stop="itemClick(index)" v-for="(item,index) in updateArr" :key="index"
				:style="{'width':(100/titleArr.length)+'%','fontSize':barFontSize+'rpx','color':(currentIndex==index&&show)?activeColor:barTextColor}">
				<view class="bar-item-text">
					{{item}}
				</view>
				<image :src="arrBase64"
					:style="{'transform': show?currentIndex==index? 'rotate(180deg)':'rotate(0)':'rotate(0)'}"></image>
			</view>
			<view class="dropdown-box"
				:style="{'bottom':'-' + (itemHeight*maxDropdownLength) + 'rpx','height':(itemHeight*maxDropdownLength) + 'rpx',backgroundColor:'#fff','opacity':show?'1':'0','display':show?'block':'none'}">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="dropdown-item"
						:style="{'height':itemHeight+'rpx','paddingLeft':itemPadding+'rpx','fontSize':itemFontSize+'rpx','color':itemTextColor}"
						v-for="(item,index) in dropArr[currentIndex]" :key="index" @tap.stop="subItemClick(index)">
						{{item[showTag]}}
					</view>
				</scroll-view>
			</view>
		</view>
		  <u-datetime-picker :show="timeShow" v-model="maxDate" :isco='true' mode="date" @resetting='resetting' :closeOnClickOverlay='true' @close='cancel'  @cancel='cancel'  @confirm='confirm'></u-datetime-picker>
		      <cc-city-picker :themeColor="themeColor" ref="mpvueCityPicker" @onCancel="onCancel" @onConfirm="onConfirm"></cc-city-picker>
		<view class="bg-mask" :class="[show?'bg-mask-show':'']" @tap="maskClose" @touchmove="touchControl"></view>
	</view>

</template>

<script>
	/**
	 *  下拉组件
	 * @author xzj
	 * @create date 2021-4-3
	 * @update user xzj
	 * @update date 2021-4-3
	 * @note 遮罩层级98 筛选条&下拉层层级99
	 **/
	 
	export default {

		data() {
			return {
				maxDate:new Date().getTime(),
				// 主条目选择序列
				currentIndex: 0,
				// 下拉条目序列
				currentSubIndex: 0,
				show: false,
				// 更新数组
				updateArr: [],
				// 结果数组
				resultArr: [],
				timeShow:false,
				addshow:false,
				time:'',
				sk:false,
				obj:{},
				cityPickerValueDefault: [0, 0, 1],
				themeColor:'#0BBBEF',
			};
		},
		computed: {
			maxDropdownLength() {
				return this.dropArr[this.currentIndex].length > this.maxItemCount ? this.maxItemCount : this.dropArr[this
					.currentIndex].length
			}
		},
		props: {
			arrBase64:{
				type: String,
				default: 'https://ymjcos.weimahl.com/image/admin/2023/09/15/96d39ae9a11d4448bd54385374df6426suzfsvs9dt.png'
			},
			// 筛选条高度 （rpx）
			height: {
				type: Number,
				default: 92
			},
			// 下拉单项高度
			itemHeight: {
				type: Number,
				default: 88
			},
			// 当前文字活跃颜色
			activeColor: {
				type: String,
				default: '#378675'
			},
			//背景颜色
			bgcolor: {
				type: String,
				default: '#fff'
			},
			//下拉标题数组
			titleArr: {
				type: Array,
				default: () => {
					return []
				}
			},
			// item数量超过多少开始滚动
			maxItemCount: {
				type: Number,
				default: 6
			},

			//下拉选项数组（二维数组）
			dropArr: {
				type: Array,
				default: () => {
					return []
				}
			},
			// 选项左偏移
			itemPadding: {
				type: Number,
				default: 24
			},
			// 能否遮罩关闭
			maskTouch: {
				type: Boolean,
				default: true
			},
			// 是否需要选择后替换标题
			isNeedChangeTitle: {
				type: Boolean,
				default: true
			},
			// 标题字号
			barFontSize: {
				type: Number,
				default: 26
			},
			navType: {
				type:String||Number,
				default:""
			},
			//标题颜色
			barTextColor: {
				type: String,
				default: '#000'
			},
			//下拉字号
			itemFontSize: {
				type: Number,
				default: 26
			},
			// 下拉文字颜色
			itemTextColor: {
				type: String,
				default: '#000'
			},
			// 需要展示的字段，比如你的数据是item.name 这里填的就是name
			showTag: {
				type: String,
				default: 'text'
			},
			date: {
				type: String,
				default: ''
			},
			// 是否要滑动关闭
			isTouchPrevent: {
				type: Boolean,
				default: true
			},
			// 自定义事件的索引数组
			customIndexArr: {
				type: Array,
				default: () => {
					return []
				}
			},
			dataShow:{
				type:Boolean,
				default:true
			}
		},
		mounted() {

			// 设置更新数组与列表数组同长度
			this.updateArr = [...new Set(this.titleArr)]
			
			// 设置结果数组与列表数组同长度
			this.resultArr = new Array(this.titleArr.length).fill('');
			if(this.navType!=''){
				console.log('上课的话',this.navType,this.dropArr[1]);
				this.obj = this.dropArr[1].find(item=>item.value==this.navType)
				this.updateArr[1] = this.obj.text
				this.navType = ''
			}
			if(this.date!=''){
				this.time = this.date
				if (this.isNeedChangeTitle) {
					this.updateArr.splice(2, 1, this.date)
				}
				this.subItemClick(0)
			}
		},
			
		methods: {
			resetting(){
				this.timeShow=false
				this.show = false
				this.time = ''
				if (this.isNeedChangeTitle) {
					this.updateArr.splice(2, 1, '时间')
				}
				console.log('11',this.updateArr);
				this.subItemClick(2)
				this.sk = false
				this.$emit('itemClick',this.sk)
				
			},
			cancel(){
				this.timeShow=false
				this.show = false
				this.sk = false
				this.$emit('itemClick',this.sk)
			},
			  onConfirm(e) {
				this.updateArr = e.label
				this.$emit('finishDropClick',this.updateArr)
			},
			onCancel(e) {
				console.log(e)
			},
			confirm(e){
				this.timeShow=false
				this.show = false
				this.time = e.value
				if (this.isNeedChangeTitle) {
					this.updateArr.splice(2, 1, this.timestampToTime(e.value))
				}
				this.subItemClick(2)
				this.sk = false
				this.$emit('itemClick',this.sk)
				console.log('11699',e);
				
			},
			timestampToTime(timestamp) {
			    timestamp = timestamp ? timestamp : null;
			    let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			    let Y = date.getFullYear() + '-';
			    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			    return Y + M + D;
			},
			itemClick(index) {
				if(this.dataShow){
					if (this.customIndexArr.includes(index)) {
						this.show = false
						this.sk=false
						this.$emit('customClick', {
							'$index': index
						})
						return
					}
					if (this.currentIndex == index) {
						this.show = !this.show
						this.sk=!this.sk
					} else {
						this.currentIndex = index
						this.show = true
						this.sk=true
					}
					console.log('111111',this.idx,index);
					if(index==2 ){
						this.timeShow = true
					}
				}else{
					 this.$refs.mpvueCityPicker.show()
				}
				this.$emit('itemClick',this.sk)
			},
			subItemClick(index) {
				this.currentSubIndex = index
				 console.log('1111111111',this.currentSubIndex);
				if (this.isNeedChangeTitle&&this.dropArr[this.currentIndex].length!=0) {
					this.updateArr.splice(this.currentIndex, 1, this.dropArr[this.currentIndex][this.currentSubIndex][this
						.showTag
					])
					console.log('选择1111',this.dropArr[this.currentIndex][this.currentSubIndex][this.showTag]);
					console.log('2222222222');
				}
               console.log('333333333333',this.updateArr);
				if(this.dropArr[this.currentIndex].length!=0){
					this.resultArr.splice(this.currentIndex, 1, this.dropArr[this.currentIndex][this.currentSubIndex]);
				}
				console.log('444444444444');
               if(this.time!=''){
				    this.resultArr.splice(2, 1, this.timestampToTime(this.time));
			   }else{
				    this.resultArr.splice(2, 1, this.time);
			   }
				
				console.log('666666666666666666',this.resultArr);
				if(this.navType!=''){
					console.log('777777777777777777');
					this.resultArr.splice(1, 1, this.obj);
				}
				console.log('888888888888888888888888');
				this.$emit('finishDropClick', this.resultArr,false)

				console.log('更新数组 = ' + JSON.stringify(this.resultArr));
                this.sk=false
				this.show = false
				this.$emit('itemClick',this.sk)
			},
			maskClose() {
				console.log('11111');
				if (!this.maskTouch) return
				this.show = false
				this.sk=false
				this.$emit('itemClick',this.sk)
			},
			//
			touchControl() {
				console.log('2222222');
				if (this.isTouchPrevent) {
					this.maskClose()
				}
			}
		}
	}
</script>

<style>
	.screen-bar {
		width: 100%;
		display: flex;
		position: relative;
		z-index: 99;
	}

/* 	.screen-bar::after {
		position: absolute;
		content: '';
		width: 100%;
		height: 1rpx;
		background-color: #EEEEEE;
		bottom: -1rpx;
		left: 0;
		z-index: 99;
	}
 */
	.screen-bar-item {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.screen-bar-item image {
		width: 24rpx;
		height: 24rpx;
		display: block;
		margin-left: 12rpx;
		transition: all .3s;
		flex-shrink: 0;
	}

	.dropdown-box {
		width: 100%;
		position: absolute;
		left: 0;
		z-index: 99;
		overflow: hidden;
	}

	.dropdown-item {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		color: #111111;
		
	}

	.bg-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 98;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}

	.bg-mask-show {
		visibility: visible;
		opacity: 1;
	}

	.bar-item-text {
		max-width: 120rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
</style>